import Vue from 'vue'
import store from '@/store'

/**
 * 权限指令 - v-has
 * 用于控制按钮、菜单等元素的显示/隐藏
 * 根据用户的权限列表判断是否具有指定权限
 */
Vue.directive('has', {
  inserted: function(el, binding) {
    // 获取指令的值，即权限标识
    const permission = binding.value
    // 获取用户权限列表
    const permissions = store.getters && store.getters.permissions
    
    // 如果没有指定权限或没有用户权限列表，则默认隐藏
    if (!permission || !permissions || permissions.length === 0) {
      el.parentNode && el.parentNode.removeChild(el)
      return
    }
    
    // 检查用户是否具有该权限
    const hasPermission = permissions.includes(permission)
    
    // 如果没有权限，则移除元素
    if (!hasPermission) {
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
})